<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        #s1{
            border: solid 1px red;
            height: 100px;
            display: flex;
        }
        .box{
            border: solid 1px rgb(41, 67, 198);
            flex-basis: 200px;
        }
        #d1{
            /* flex-grow:当flex布局的父元素布局方向上的空间大于所有子元素的长度时
            额外的长度分配给这个子元素多少（按比例）默认为0 */
            flex-grow: 1;

        }
        #d2{
            flex-grow: 2;
        }
        #d3{
            flex-grow: 1;
        }
        #s2{
            margin-top: 20px;
            border: solid 1px rgb(48, 5, 5);
            height: 100px;
            display: flex;
        }
        .box1{
            border: solid 1px rgb(181, 71, 15);
            flex-basis: 450px;
        }
        #d4{
            /* 当父元素长度不够时所有子元素长度之和时，
            让那些子元素变小（按比例） 默认为1*/
            flex-shrink: 0;
        }
        #d5{
            flex-shrink: 0.5;
        }
        #d6{
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <section id="s1">
        <div id="d1" class="box"></div>
        <div id="d2" class="box"></div>
        <div id="d3" class="box"></div>
    </section>
    <section id="s2">
        <div id="d4" class="box1"></div>
        <div id="d5" class="box1"></div>
        <div id="d6" class="box1"></div>
    </section>
</body>
</html>